<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>

<body>
<input type="button" value="Create" onclick="addX3D();">
<div id='container0'></div>
<div id='container1'></div>
<div id='container2'></div>

<script>
var i = 0;
function addX3D()
{
    if (i >= 3) {
        var x3d = document.getElementsByTagName("x3d");
        for (var j=x3d.length-1; j>=0; j--) {
            var el = x3d[j];
            if (el && el.parentNode)
                el.parentNode.removeChild(el);
        }
        i = 0;
    }

    document.getElementById('container'+(i++)).innerHTML =
    '<x3d id="x3d'+i+'" showStat="false" showLog="false" width="800px" height="600px">'+
      '<scene>'+
        '<viewpoint position="0 0 10"></viewpoint>'+
          '<shape>'+
            '<appearance>'+
                '<material diffuseColor="0.7 0.6 0.5" ></material>'+
            '</appearance>'+
            '<box></box>'+
         '</shape>'+
      '</scene>'+
    '</x3d>';
    
    x3dom.reload();
}
</script>
</body>
</html>